<template>
  <div style="background-color: #ffffff;padding: 24px 16px">
    <div>
      <h1 style="font-size: 18px">客服信息</h1>
    </div>
    <a-divider/>
    <div>
      <h1>电话</h1>
      <div style="border:1px #dddddd solid;padding: 16px;width: 250px;border-radius: 4px;margin-top: 16px">
        <a-row>
          <a-col :span="21">
            <div style="font-size: 12px; color: #0C1523">{{ telType }}</div>
            <div style="font-size: 18px; color: #717273;font-weight: 500">{{ telNum }}</div>
          </a-col>
          <a-col :span="3">
            <div style="font-size: 18px">
              <a-icon type="edit" @click="telModelShow = !telModelShow"/>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div style="margin-top: 16px">
      <h1>微信号</h1>
      <div style="border:1px #dddddd solid;padding: 16px;width: 250px;border-radius: 4px;margin-top: 16px">
        <a-row>
          <a-col :span="21">
            <div style="font-size: 12px; color: #0C1523">微信号</div>
            <div style="font-size: 18px; color: #717273;font-weight: 500">{{ wechatNum }}</div>
          </a-col>
          <a-col :span="3">
            <div style="font-size: 18px">
              <a-icon type="edit" @click="wechatModelShow = !wechatModelShow"/>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <a-modal v-model="telModelShow" title="修改电话" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="telModelShow = !telModelShow">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleMergeTel">
          确认
        </a-button>
      </template>
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="类型">
          <a-radio-group name="radioGroup" v-model="telType">
            <a-radio value="手机">
              手机
            </a-radio>
            <a-radio value="普通座机">
              普通座机
            </a-radio>
            <a-radio value="400-800电话">
              400-800电话
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="电话号">
          <a-input v-model="telNum"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model="wechatModelShow" title="修改微信号" on-ok="handleOk1">
      <template slot="footer">
        <a-button key="back" @click="wechatModelShow = !wechatModelShow">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleMergeTel">
          确认
        </a-button>
      </template>
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="微信号">
          <a-input v-model="wechatNum"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { queryTel, mergeTel } from '@/api/tel'

  export default {
    name: 'SetConnect',
    data () {
      return {
        telType: '',
        telNum: '',
        wechatNum: '',
        telModelShow: false,
        wechatModelShow: false
      }
    },
    methods: {
      handleMergeTel () {
        mergeTel({ telType: this.telType, telNum: this.telNum, wechatNum: this.wechatNum }).then(rsp => {
          this.$message.success('客服信息设置成功')
          this.telModelShow = false
          this.wechatModelShow = false
        })
      }
    },
    mounted () {
      queryTel({}).then(rsp => {
        this.telType = rsp.telType
        this.telNum = rsp.telNum
        this.wechatNum = rsp.wechatNum
      })
    }
  }
</script>

<style scoped>

</style>
